<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/template/template.xhtml"
>
	<ui:define name="conteudo">
	<div class="page-header">
		<ol class="breadcrumb breadcrumb-page">
			<li>
				<h:outputLink>
					<h:outputText value="#{mensagens['display.voce.esta.em']}" />
				</h:outputLink>
			</li>
			<li>
				<h:outputText value="#{usuarioSessionBean.usuarioSessao.dePerfil}" />
			</li>
			<li>
				<h:outputText value="#{mensagens['display.editar.perfil']}" />
			</li>
			<li class="active">
				<h:outputText value="#{mensagens['display.mudar.senha']}" />
			</li>
		</ol>
		<h:messages id="mensagens"  errorClass="alert alert-danger alert-dark" infoClass="alert alert-info alert-dark" warnClass="alert alert-dark"/>
	</div>
	<div id="content" class="content">
		<div class="row">
			<div class="col-md-12">
				<h:form prependId="false" styleClass="form-horizontal">
					<div class="panel">
						<div class="panel-body">
							<div class="form-group">
								<label for="avatar" class="col-sm-2 control-label"><h:outputText id="avatar" value="#{mensagens['display.selecione.seu.avatar']} " /> </label>
								<div class="col-sm-6 avatar tooltips">
									<ui:repeat id="avatares" varStatus="fotoStatus" var="foto" value="#{editarAvatarBean.avatares}">
										<h:graphicImage id="avatar" title="Selecionar" value="/resources/img/avatares/#{foto.name}" onclick="selecionarAvatar(this)">
											<f:ajax event="click" listener="#{editarAvatarBean.definirAvatar(foto.name)}"/>
										</h:graphicImage>
									</ui:repeat>
								</div>
							</div>
						</div>
						
						<div class="panel-footer">
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<h:commandButton value="#{mensagens['display.atualizar.foto']}" styleClass="btn btn-primary btn-xs" action="#{editarAvatarBean.editarAvatar()}" />
									<h:commandButton value="#{mensagens['display.voltar']}" immediate="true" styleClass="btn btn-default btn-xs marginLeft_10" action="#{editarAvatarBean.voltarTelaPerfil()}" />
								</div>
							</div>
						</div>
						</div>
					</h:form>
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>